<template>
        <div class="nav">
                <el-container>
                        <el-header>
                                <div class="box"><span>蜗牛在线实验室</span> 欢迎您 &nbsp;&nbsp; jack<img class="header-profile" src="" />
                                </div>
                                <div>
                                        <el-dropdown>
                                                <span>
                                                        <img src="./../assets/imgs/zhanshi.jpg" alt="" style="width: 30px;">
                                                </span>
                                                <template #dropdown>
                                                        <el-dropdown-menu>
                                                                <el-dropdown-item>个人中心</el-dropdown-item>
                                                                <el-dropdown-item>密码修改</el-dropdown-item>
                                                                <el-dropdown-item>退出登录</el-dropdown-item>
                                                        </el-dropdown-menu>
                                                </template>
                                        </el-dropdown>
                                </div>
                        </el-header>
                        <el-container>
                                <el-aside width="200px">
                                        <el-menu router :default-active="activeIndex" class="el-menu-vertical-demo">
                                                <el-menu-item index="/nav">
                                                        <el-icon><location /></el-icon>
                                                        <span>首页</span>
                                                </el-menu-item>
                                                <el-menu-item index="/nav/carsoules">
                                                        <el-icon><location /></el-icon>
                                                        <span>轮播图管理</span>
                                                </el-menu-item>
                                                <el-sub-menu index="organization-management">
                                                        <template #title>
                                                                <el-icon>
                                                                        <location />
                                                                </el-icon>
                                                                <span>组织管理</span>
                                                        </template>

                                                        <el-menu-item index="/nav/users">
                                                                <el-icon><icon-menu /></el-icon>
                                                                <span>用户管理</span>
                                                        </el-menu-item>
                                                        <el-menu-item index="/nav/roles">
                                                                <el-icon><icon-menu /></el-icon>
                                                                <span>角色管理</span>
                                                        </el-menu-item>
                                                        <el-menu-item index="/nav/forms">
                                                                <el-icon><icon-menu /></el-icon>
                                                                <span>表单管理</span>
                                                        </el-menu-item>
                                                </el-sub-menu>
                                                <el-sub-menu index="rangeManagement">
                                                        <template #title>
                                                                <el-icon>
                                                                        <location />
                                                                </el-icon>
                                                                <span>靶场管理</span>
                                                        </template>
                                                        <el-menu-item index="/nav/rangeslist">
                                                                <el-icon><icon-menu /></el-icon>
                                                                <span>靶场列表</span>
                                                        </el-menu-item>

                                                </el-sub-menu>
                                        </el-menu>
                                </el-aside>
                                <el-main><router-view /></el-main>
                        </el-container>
                </el-container>
        </div>
</template>

<script setup lang='ts'>
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
        ArrowDown
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const activeIndex = ref('1')

</script>

<style lang="less" scoped>
.example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
}

.nav {
        .el-container {
                height: 100vh;
        }

        .el-header {
                background-color: #001629;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;

                .box {
                        display: flex;
                        align-items: center;
                        color: white;

                        span {
                                font-size: 25px;
                                font-style: oblique;
                                margin-right: 20px;
                        }

                        img {
                                margin-left: 20px;
                        }
                }

                .header-profile {
                        width: 50px;
                        height: 50px;
                        border-radius: 50px;
                }
        }

        .el-aside {
                background-color: #D9ECFF;
        }

        .el-main {
                background-color: #ECF5FF;
        }
}
</style>